<template>
  <el-dialog :visible.sync="showDialog" width="90%" title="订单详情" :close-on-click-modal="false">
    <el-row :gutter="20">
      <el-col :span="12">订单号：{{ order.order_no }}</el-col>
      <el-col :span="6">订单类型：{{ order.status | order_type }}</el-col>
      <el-col :span="6">订单状态：{{ order.status | order_status }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">用户昵称：{{ user.nickname }}</el-col>
      <el-col :span="6">账号：{{ user.username }}</el-col>
      <el-col :span="6">手机号：{{ user.phone_number }}</el-col>
      <el-col :span="6">是否VIP：{{ user.is_vip === '1' ? 'VIP会员' : '普通会员' }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <xu-table :data="tableData" :options="tableOptions">
          <template slot="title" slot-scope="{ row }">
            <el-tooltip :content="row.title">
              <span>{{ row.title }}</span>
            </el-tooltip>
          </template>
          <template slot="thumb" slot-scope="{ row }">
            <img :src="row.thumb" style="width: 100px; height: auto;" />
          </template>
          <template slot="price" slot-scope="{ row }">¥{{ row.price }}</template>
        </xu-table>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">下单时间：{{ order.create_time }}</el-col>
      <el-col :span="6">支付时间：{{ order.pay_time || '--' }}</el-col>
      <el-col :span="6">总价格：{{ order.total_fee }}</el-col>
      <el-col :span="6">支付价格：{{ order.pay_fee }}</el-col>
    </el-row>
    <el-form :model="form" v-if="order.status === '1'">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="快递名称" prop="express_name">
            <el-input v-model="form.express_name" placeholder="顺丰快递" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递单号" prop="express_no">
            <el-input v-model="form.express_no" placeholder="20210505123123123" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer" slot="footer">
      <el-button @click="showDialog = false" size="small">关闭</el-button>
      <el-button
        type="primary"
        @click="handleSave"
        size="small"
        :loading="loading"
        v-if="order.status === '1'"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions } from 'vuex'
import { OrderActionsEnum } from '../_/vue/store/order'
export default {
  name: 'XuOrderDetail',
  props: {
    value: Boolean,
    id: [Number, String]
  },
  data () {
    return {
      loading: false,
      showDialog: this.value,
      order: {},
      user: {},
      tableData: [],
      tableOptions: [
        { attrs: { label: '商品名称', prop: 'title' } },
        { attrs: { label: '图片', prop: 'thumb' } },
        { attrs: { label: '单价', prop: 'price', width: '100px', align: 'center' } }
      ],
      form: {
        express_no: '',
        express_name: ''
      }
    }
  },
  watch: {
    value (val) {
      this.showDialog = val
    },
    showDialog (val) {
      this.$emit('input', val)
    }
  },
  async mounted () {
    const resp = await this.edit(this.id)
    this.order = resp.data
    this.user = resp.data.user
    this.tableData = [resp.data.details]
    this.form.express_no = resp.data.express_no
    this.form.express_name = resp.data.express_name
  },
  methods: {
    ...mapActions({
      edit: OrderActionsEnum.EDIT,
      save: OrderActionsEnum.SAVE
    }),
    handleSave () {
      this.$confirm('确认发货么？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.save({ id: this.id, data: { ...this.form, status: '2' } })
        this.$message.success(this.order.express_no ? '修改快递成功' : '发货成功')
        this.showDialog = false
        this.loading = false
      }).catch(() => { })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  margin-bottom: 15px;
}
</style>
